import { Button, Input, message } from "antd"
import { useRef, useState } from "react"
import c from './text.module.scss'
import moment from "moment"
import _ from 'lodash'
import className from 'classnames'
// import Search from "antd/es/transfer/search"
const list = new Array(2).fill({ name: 'ddd' })
const isLogin = true
const coment = [

    { id: 2, username: '小刚', zan: 20, time: moment('2015 / 5 / 5').format('YYYY-MM-DD hh:mm:ss'), content: '哈哈哈哈哈', isSelf: false },
    { id: 4, username: '小粉', zan: 630, time: moment('2015 / 4 /1 ').format('YYYY-MM-DD hh:mm:ss'), content: '噢噢噢噢', isSelf: true },
    { id: 1, username: '小红', zan: 10, time: moment('2015 / 6 / 5 5:01:01').format('YYYY-MM-DD hh:mm:ss'), content: '今天月色真美', isSelf: true },
    { id: 3, username: '小紫', zan: 120, time: moment('2015 / 1 / 5').format('YYYY-MM-DD hh:mm:ss'), content: '网球爱好者', isSelf: false },
]

const handle = (e: any, data: any) => {
    console.log('e', e);
    console.log('data', data);
}



const tabList = [{ id: 1, title: '最新' }, { id: 2, title: '最热' }]

export const Text = () => {
    const inputRef: any = useRef(null)
    const [getCurrentTab, setCurrentTab] = useState(1)
    const [commentList, setCommentList] = useState(_.orderBy(coment, 'time', 'desc'))
    const [value, setValue] = useState(55)
    const changeTabs = (item: any) => {
        setCurrentTab(item.id)

        if (item.id == 1) {
            setCommentList(_.orderBy(commentList, 'time', 'desc'))
        } else {
            setCommentList(_.orderBy(commentList, 'zan', 'desc'))
        }


    }
    const del = (item: any) => {
        setCommentList(commentList.filter((it: any) => it.id !== item.id))
    }

    const changeValue = (value: any) => {
        console.log('value', value);
        setValue(value)
    }

    const getDomRef = () => {
        inputRef.current.focus()
        console.dir(inputRef.current);
    }
    const [commentText, setCommentText] = useState('')
    const changeComment = (value: any) => {
        setCommentText(value)
        console.log('commentText', commentText);
    }

    const commentRef: any = useRef(null)

    const submit = () => {
        if (commentText == '') {
            message.warning('评论不能为空');
            return
        }
        const obj = {
            id: commentList.length + 1,
            username: '小孩',
            zan: 120,
            time: moment().format('YYYY-MM-DD hh:mm:ss'),
            content: commentText,
            isSelf: true
        }
        setCommentList([...commentList, obj])
        setCommentText('')
        commentRef.current.focus()
    }


    return (
        <>
            {
                <ul>
                    {
                        list.map((item, index) => (
                            <li key={index}>{item.name}</li>
                        ))
                    }
                </ul>
            }
            {isLogin && <Button type='primary' onClick={(e) => handle(e, 'kk')}>登录1</Button>}

            {isLogin ? <Button type='primary'>注册</Button> : <Button type='primary'>登录</Button>}

            <div className={c.texted}>11</div >

            <div className={c.example}>案例 评论列表</div>

            <div className={c.comment}>
                <div className={c.tabs}>
                    {
                        tabList.map((item, _idnex) => (
                            // <span onClick={() => changeTabs(item)} style={{ color: getCurrentTab === item.id ? 'aquamarine' : '' }} key={item.id} className={c.tabOme}>{item.title}</span>
                            // <span className={`${c.tabOme} ${getCurrentTab == item.id ? c.tabActive : ''}`} onClick={() => changeTabs(item)} key={item.id}>{item.title}</span>
                            <span className={className(c.tabOme, { [c.tabActive]: getCurrentTab == item.id })} onClick={() => changeTabs(item)} key={item.id}>{item.title}</span>
                        ))
                    }
                </div>

                <div className={c.send}>
                    <div className={c.ipt}>   <Input ref={commentRef} type="text" value={commentText} onChange={(e) => changeComment(e.target.value)} placeholder="输入评论..." /></div>
                    <Button type="primary" onClick={submit} disabled={commentText == '' ? true : false}>提交</Button>
                </div>

                <div className={c.commentContent}>

                    {
                        commentList.map((item: any, _index: any) => (
                            <div key={item.id} className={c.commentOne}>
                                <div className={c.userName}>
                                    <span>{item.username}</span>
                                </div>
                                <div className={c.content}>
                                    {item.content}
                                </div>
                                <div className={c.tip}>
                                    <div className={c.time}>{item.time.toLocaleString()}</div>
                                    <div className={c.zan}><span>点赞数:</span> <span>{item.zan}</span> </div>
                                    {item.isSelf && <div className={c.del} onClick={() => del(item)}>删除</div>}
                                </div>
                            </div>
                        ))
                    }

                </div>
            </div >

            <div>
                <input type="text" value={value} onChange={(e) => changeValue(e.target.value)} />
            </div>

            <div className={c.password}>  <Input ref={inputRef} placeholder="Basic usage" allowClear type="password" value={value} onChange={(e) => changeValue(e.target.value)} /></div>

            <Button onClick={getDomRef}>获取DOM对象</Button>

        </>
    )
}